<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			/* [class^="box"]:hover {
				transform: rotate(144deg);
				transition: all 60s;
			} */
			div {
				border: 1px solid #000;
				margin: 6px 6px;
				background-color: white;
			}

			#box-1 {
				margin: auto auto;
			}

			body {
				text-align: center;
			}
			#btn{
				margin: 150px;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn">点击开始</button>
		<div id="box-1" style="width: 1000px ; height: 1000px;"></div>

		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var boxready = "";
			var boxend = "";
			//获得当前div的宽高
			var width = $("#box-1").width();
			var height = $("#box-1").height();
			//rgb颜色随机数
			var num1 = Math.ceil(Math.random() * 255);
			var num2 = Math.ceil(Math.random() * 255);
			var num3 = Math.ceil(Math.random() * 255);

			$(function() {
				for (i = 0; i < 65; i++) {
					width -= 15;
					height -= 15;
					boxready += "<div class=\"box" + i + "\" style = width:" + width + "px;height:" + height + "px>"; //background-color:rgb("+num1+","+num2+","+num3+")>";
				};
				for (var i = 0; i < 65; i++) {
					boxend += "</div>";
				};
				var divadd = boxready + boxend;
				$("#box-1").html(divadd);
				$("#btn").on("click",function() {
					var i = 65;
					var a = setInterval(function() {
						if (i <= 65) {
							$(".box" + i).css("background-color", "white");
						}
						// i--;
						if (i <= 64) {
							var y=i-1;
							$(".box" + y).css("background-color", "red");
						}
						i--;
						$(".box"+i).css(
							{
								"transform": "rotate(1440deg)",
								"transition": "all 50s"
							}
						)
						i--;
					}, 10);
				});	
			});
		</script>
	</body>
</html>
